<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>蓝后网络</title>
    <meta name="description" content="网站描述">
    <meta name="keywords" content="关键字">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 整屏格式 -->
    <div id="pages">
        <!-- 第一屏 -->
        <div class="page page1">
            <!-- 轮播图 -->
            <div class="slider">
                <ul class="banner" id="banner">
                    <li class="b1" style="background: url(images/banner1.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;">
                        <a href="" class="do animated bounce infinite"><img src="images/download.png" alt=""></a>
                    </li>
                    <li class="b2" style="background: url(images/banner2.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;">
                        <div class="cover animated slideInRight"></div>
                        <div class="banner2-p animated slideInLeft" style="background: url(images/banner2-p.png) no-repeat center;-webkit-background-size: cover;background-size: cover;"></div>
                    </li>
                    <li class="b3" style="background: url(images/banner3.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;"></li>
                    <li class="b4" style="background: url(images/banner4.jpg) no-repeat center;-webkit-background-size: cover;background-size: cover;">
                        <div class="banner4-p animated slideInLeft" style="background: url(images/banner4-p.png) no-repeat center;-webkit-background-size: cover;background-size: cover;">
                        </div>
                        <div class="banner4-c animated fadeInRight" style="background: url(images/banner4-c.png) no-repeat center;-webkit-background-size: cover;background-size: cover;">
                        </div>
                        <div class="banner4-k animated rotateInDownRight" style="background: url(images/banner4-k.png) no-repeat center;-webkit-background-size: cover;background-size: cover;animation-delay:0.75s;"></div>
                    </li>
                </ul>
                <nav class="dot">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </nav>
            </div>
        </div>
        <div class="page page2">
            <div class="left">
                <img src="images/page2-left.png" alt="">
            </div>
            <div class="right">
                <div class="top">
                    <h2>什么是纳品网</h2>
                    <h3>纳品网是杭州蓝后网或科技有限公司开发的一款电系统</h3>
                </div>
                <div class="main">
                    <ul>
                        <li class="animated  slideInRight one">
                            <h3>产品定位</h3>
                            <p>移动互联网时代下，新技术，新模式，新框架与一体的次时代电商系统。 微信端+原生APP双轨驱动，打造更好用户体验</p>
                            <i class="icon icon5"></i>
                        </li>
                        <li class="animated  slideInRight two">
                            <h3>适合人群</h3>
                            <p>ECJia主要针对初创企业或者大型企业、电商从业者、开发者、实体零售 商、快速布局电商行业，并且线上线下全渠道打通</p>
                            <i class="icon icon6"></i>
                        </li>
                        <li class="animated  slideInRight three">
                            <h3>产品优势</h3>
                            <p>系统自主研发，改动灵活、支持自由扩展、可根据用户需求进行个性化 开发，上线快，基于原生开发模式，运行稳定</p>
                            <i class="icon icon7"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="page page3">
            <div class="content">
                <div class="top">
                    <span class="left"></span><h3>我们的服务</h3><span class="right"></span>
                </div>
                <div class="main">
                    <div class="cover cover1">
                        <img src="images/server1.png" alt="" class="origin">
                        <div class="con con1">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                        <img src="images/hover1.png" alt="" class="hover hover1">
                    </div>
                    <div class="cover cover2">
                        <img src="images/server2.png" alt="" class="origin">
                        <div class="con con2">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                        <img src="images/hover2.png" alt="" class="hover hover2">
                    </div>
                    <div class="cover cover3">
                        <img src="images/server3.png" alt="" class="origin">
                        <div class="con con3">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                    </div>
                    <div class="cover cover4">
                        <img src="images/server4.png" alt="" class="origin">
                        <div class="con con4">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                    </div>
                    <div class="cover cover5">
                        <img src="images/server5.png" alt="" class="origin">
                        <div class="con con5">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                        <img src="images/hover3.png" alt="" class="hover hover3">
                    </div>
                    <div class="cover cover6">
                        <img src="images/server6.png" alt="" class="origin">
                        <div class="con con6">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                        <img src="images/hover4.png" alt="" class="hover hover4">
                    </div>
                    <div class="cover cover7">
                        <img src="images/server7.png" alt="" class="origin">
                        <div class="con con7">
                            <p class="p">纳品网互动</p>
                            <p>行业整体解决方案</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page page4">
            <div class="main">
                <ul>
                    <li>
                        <div id="count1"></div>
                        <p>千余款应用开发</p>
                    </li>
                    <li>
                        <div id="count2"></div>
                        <p>服务于500+企业</p>
                    </li>
                    <li>
                        <div class="spc" id="count3"></div>
                        <p>50+移动战略伙伴</p>
                    </li>
                    <li>
                        <div id="count4"></div>
                        <p>top200家合作供应商</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page page5">
            <div class="top clear">
                <div class="tleft fl">
                    <h2>新闻</h2>
                    <ul>
                        <li class="clear">
                            <a href="">
                                <p>徐少春向母校捐建教学楼 希冀学子立志高远</p>
                                <p class="date">2017-09-10</p>
                            </a>
                        </li>
                        <li class="clear">
                            <a href="">
                                <p>金蝶国际公布2017年中期业绩 金蝶云收入劲涨70%</p>
                                <p class="date">2017-08-24</p>
                            </a>
                        </li>
                        <li class="clear">
                            <a href="">
                                <p>金蝶云大厦拔地而起 ，企业云服务“只做第一”</p>
                                <p class="date">2017-08-24</p>
                            </a>
                        </li>
                    </ul>
                    <p class="more"><a href="news.html">查看更多></a></p>
                </div>
                <div class="tright fr">
                    <h2>展会及活动</h2>
                    <div class="con clear">
                        <div class="l fl">
                            <img src="images/zz.jpg" alt="">
                            <p>走向智能制造•开启数字转型</p>
                            <p class="date">中国，上海 10月15日</p>
                        </div>
                        <div class="r fr">
                            <img src="images/xls.jpg" alt="">
                            <p>从新零售到大数据，论企业发展 </p>
                            <p class="date">中国，上海 10月15日</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom clear">
                <div class="bleft fl">
                    <h2>应用上线</h2>
                    <p class="title">精品上线应用</p>
                    <nav>
                        <ul>
                            <li><a href="">与上海亚茄文化传播有限公司合作，上线雪茄客APP应用</a></li>
                            <li><a href="">与法兰山德乐器（上海）有限公司合作，上线法兰山德音乐</a></li>
                            <li><a href="">与万达酒店建设有限公司合作，上线万悦会应用</a></li>
                            <li><a href="">与上海魔山广告传播有限公司合作，上线魔山杂志应用</a></li>
                            <li><a href="">与上海世纪出版股份有限公司科学技术出版社合作，上线移</a></li>
                            <li><span class="date">2017-07</span>与苏州乐活岛旅游开发有限公司合作，开发房车智行</li>
                            <li><span class="date">2017-07</span>与客户合作，开发习惯APP</li>
                            <li><span class="date">2017-07</span>与上海翼采通网络科技发展有限公司合作，开启彩票购买APP项目</li>
                            <li><span class="date">2017-07</span>与黑钻石(北京)文化传媒股份有限公司合作，开发钻石路演</li>
                            <li><span class="date">2017-07</span>与西安魔石网络科技有限公司，开发AR摩托配件展示项目</li>
                            <li><a href="">与上海亚茄文化传播有限公司合作，上线雪茄客APP应用</a></li>
                            <li><a href="">与法兰山德乐器（上海）有限公司合作，上线法兰山德音乐</a></li>
                            <li><a href="">与万达酒店建设有限公司合作，上线万悦会应用</a></li>
                            <li><a href="">与上海魔山广告传播有限公司合作，上线魔山杂志应用</a></li>
                            <li><a href="">与上海世纪出版股份有限公司科学技术出版社合作，上线移</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="bright fr">
                    <h2>最新签约</h2>
                    <p class="title">实时更新最新签约动态</p>
                    <nav>
                        <ul>
                            <li><span class="date">2017-07</span>与苏州乐活岛旅游开发有限公司合作，开发房车智行</li>
                            <li><span class="date">2017-07</span>与客户合作，开发习惯APP</li>
                            <li><span class="date">2017-07</span>与上海翼采通网络科技发展有限公司合作，开启彩票购买APP项目</li>
                            <li><span class="date">2017-07</span>与黑钻石(北京)文化传媒股份有限公司合作，开发钻石路演</li>
                            <li><span class="date">2017-07</span>与西安魔石网络科技有限公司，开发AR摩托配件展示项目</li>
                            <li><a href="">与上海亚茄文化传播有限公司合作，上线雪茄客APP应用</a></li>
                            <li><a href="">与法兰山德乐器（上海）有限公司合作，上线法兰山德音乐</a></li>
                            <li><a href="">与万达酒店建设有限公司合作，上线万悦会应用</a></li>
                            <li><a href="">与上海魔山广告传播有限公司合作，上线魔山杂志应用</a></li>
                            <li><a href="">与上海世纪出版股份有限公司科学技术出版社合作，上线移</a></li>
                            <li><span class="date">2017-07</span>与苏州乐活岛旅游开发有限公司合作，开发房车智行</li>
                            <li><span class="date">2017-07</span>与客户合作，开发习惯APP</li>
                            <li><span class="date">2017-07</span>与上海翼采通网络科技发展有限公司合作，开启彩票购买APP项目</li>
                            <li><span class="date">2017-07</span>与黑钻石(北京)文化传媒股份有限公司合作，开发钻石路演</li>
                            <li><span class="date">2017-07</span>与西安魔石网络科技有限公司，开发AR摩托配件展示项目</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="page page6">
            <div class="main">
                <div class="top">
                    <span class="left"></span><h3>我们的商品展示</h3><span class="right"></span>
                </div>
                <p class="sub-title">艺术形式为你展示出最美的羽绒服</p>
                <div class="con">
                    <nav id="b-goods">
                        <div>
                            <ul class="clear">
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b1.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>我知道你，<span>你对版型要求很挑剔</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b2.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>这个冬天，<span>一样让你可以时髦</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b3.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>在这里，<span>还原你一个少女梦</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b1.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>我知道你，<span>你对版型要求很挑剔</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b2.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>这个冬天，<span>一样让你可以时髦</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b3.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>在这里，<span>还原你一个少女梦</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b1.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>我知道你，<span>你对版型要求很挑剔</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b2.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>这个冬天，<span>一样让你可以时髦</span></p>
                                        <!-- <a href="">查看更多</a> -->
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <img src="images/goods-b3.jpg" alt="">
                                    </div>
                                    <div class="bot">
                                        <p>在这里，<span>还原你一个少女梦</span></p>
                                        <a href="">查看更多</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <span class="arrow-left arrow"></span>
                        <span class="arrow-right arrow"></span>
                    </nav>
                </div>
            </div>
        </div>
        <div class="page page7">
            <div class="main">
                <div class="top">
                    <span class="left"></span><h3>合作伙伴</h3><span class="right"></span>
                </div>
                <p class="sub-title">我们诚邀您，如他们一样，体验科匠中国的科技创新成果，感受移动互联魅力。</p>
                <div class="con">
                    <table>
                        <tr>
                            <td>
                                <img src="images/01.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>
                            </td>
                            <td>
                                <img src="images/02.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/03.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/04.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/05.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/06.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/07.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="images/01.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>
                            </td>
                            <td>
                                <img src="images/02.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/03.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/04.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/05.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/06.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/07.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="images/01.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>
                            </td>
                            <td>
                                <img src="images/02.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/03.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/04.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/05.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/06.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>

                            </td>
                            <td>
                                <img src="images/07.jpg" alt="">
                                <img src="" alt="">
                                <div class="cover">
                                    <p>集团名称</p>
                                </div>
                            </td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>
        <div class="page page8">
            <div class="main">
                <div class="top clear">
                    <div class="left fl">
                        <nav class="l fl">
                            <ul>
                                <li><a href="" class="title">关于我们</a></li>
                                <li><a href="">公司介绍</a></li>
                                <li><a href="">安全保障</a></li>
                                <li><a href="">诚征英才</a></li>
                            </ul>
                        </nav>
                        <nav class="r fr">
                            <ul>
                                <li><a href="" class="title">关于我们</a></li>
                                <li><a href="">公司介绍</a></li>
                                <li><a href="">安全保障</a></li>
                                <li><a href="">诚征英才</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="right fr">
                        <p class="tel">客服电话：4471044710</p>
                        <p>（000-124）</p>
                        <a href="">在线客服</a>
                    </div>
                    <div class="middle">
                        <ul class="clear">
                            <li>
                                <div class="box">
                                    <img src="images/qr-code.png" alt="">
                                    <!-- <img src="images/qr-code.png" alt="" class="qr-code animated fadeInDown"> -->
                                </div>
                                <p>APP for Andriod</p>
                            </li>
                            <li>
                                <div class="box">
                                    <img src="images/qr-code.png" alt="">
                                    <!-- <img src="images/qr-code.png" alt="" class="qr-code animated fadeInDown"> -->
                                </div>
                                <p>APP for IOS</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <nav class="bottom">
                    <a href="">友情链接</a>
                    <a href="">可信资本</a>
                    <a href="">理财社区</a>
                    <a href="">和讯互联网金融</a>
                    <a href="">和讯互联网金融</a>
                    <a href="">和讯互联网金融</a>
                </nav>
            </div>
        </div>
    </div>
    <!-- 顶部固定导航条 -->
    <header class="fixed">
        <div class="content">
            <div class="fl left clear">
                <img src="images/logo.png" alt="" class="fl">
                <p class="fl">互联网+电商生态品牌<br>www.napin.com</p>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">关于纳品</a>
                    </li>
                    <li>
                        <a href="javascript:;">产品服务</a>
                    </li>
                    <li>
                        <a href="javascript:;">数字中心</a>
                    </li>
                    <li>
                        <a href="javascript:;">新闻中心</a>
                    </li>
                    <li>
                        <a href="javascript:;">产品中心</a>
                    </li>
                    <li>
                        <a href="javascript:;">合作伙伴</a>
                    </li>
                    <li>
                        <a href="javascript:;">联系我们</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/pageSwitch.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/countUp.js"></script>
    <script>
        var pw=new pageSwitch('pages',{
            duration:1000,
            direction:1,
            start:0,
            loop:false,
            ease:'',
            transition:'scroll',
            freeze:false,
            mouse:false,
            mousewheel:true,
            // arrowkey:false,         //bool 是否启用键盘方向切换
            // autoplay:false,         //bool 是否自动播放幻灯 新增
            // interval:0            //bool 幻灯播放时间间隔 新增
        });
        var $span = $('<span></span>');
        $('header li').eq(0).append($span);
        $('header li').click(function(){
            var index = $(this).index();
            pw.slide(index);
            $(this).append($span);
        });
        // 初始化
        $(function(){
            $('.page1 .slider li').eq(0).show();
            $('.page1 .dot span').eq(0).addClass('on');
            var options = {
              useEasing: true,
              useGrouping: true,
              separator: '',
              decimal: '.',
            };
            var count1 = new CountUp('count1', 0, 1000, 0, 2.5, options);
            var count2 = new CountUp('count2', 0, 500, 0, 2.5, options);
            var count3 = new CountUp('count3', 0, 50, 0, 2.5, options);
            var count4 = new CountUp('count4', 0, 200, 0, 2.5, options);
            pw.on("after",function(newv,oldv){
                if(newv===3){
                    count1.start();
                    count2.start();
                    count3.start();
                    count4.start();
                }
                $('header li').eq(newv).append($span);
            });
            // 合作厂商
            (function(){
                var index,src,arr;
                var length = 7;
                var timer = setInterval(function(){
                    index = Math.ceil(Math.random()*21);
                    arr = $('.page7 table img').filter(function(index){
                        return $(this).css("display")!=="none";
                    });
                    src = "images/0"+ Math.ceil(Math.random()*length)+".jpg";
                    var $that = arr.eq(index);
                    $that.removeClass('frotate').addClass("srotate").hide(600).siblings("img").attr("src",src).addClass("frotate").show(600);
                    $that.siblings("img").removeClass('sotate');
                },4000);
            })();
        })
    </script>
</body>
</html>
